<template>
    <div class="cook" ref="cook">

    </div>
</template>

<script>
    import axios from 'axios'
    import bus from "@/bus/bus";
    import * as echarts from 'echarts'
    export default {
        name: "cookie",
        data(){
            return{
                arrs:[
                    { value: 335, name: 'A区' },
                    { value: 310, name: 'B区' },
                    { value: 274, name: 'C区' },
                    { value: 335, name: 'D区' },
                    { value: 240, name: 'E区' }
                ]
            }
        },
        mounted() {
            //接收传参
            bus.$on('shareUserInput',(data)=>{
                let nameCookie=data.userInput
                console.log('cookie收到的参',nameCookie)
            })
            //连接后端接口
            /*axios.get('').then(
                response => {
                    console.log('连接成功！',response.data)
                    //获取省份数据
                    let citys=response.data.data
                    //let arr=[]
                    for(let i=0;i<citys.length;i++){
                        let obj={}
                        obj.name=citys[i].name
                        obj.value=citys[i].title
                        this.arrs.push(obj)
                    }
                    console.log(this.arrs)
                },
                error =>{
                    console.log('连接失败！',error.message)
                }
            )*/

            //图形数据操作
            let myChart=echarts.init(this.$refs.cook)
            let data=this.arrs
            let option={
                title:{
                    text:'风险区',
                    left:'center',
                    textStyle:{
                        color:'#FFFFFF',
                        opacity:0.8
                    }
                },
                /*legend:{
                    left: 'left',
                    orient:'verical'
                },*/
                tooltip: {
                    trigger: 'item'
                },
                series:[
                    {
                        name:'疫情统计',
                        type:'pie',
                        radius:'40%',
                        roseType:"area",
                        data,
                        itemStyle: {
                            normal: {
                                label: {
                                    textStyle: {
                                        color:'#FFFFFF'
                                    }
                                },
                                labelLine : {
                                    lineStyle:{
                                        color:'#FFFFFF'
                                    }
                                }
                            }
                        },
                    }
                ]
            }
            myChart.setOption(option)

        }
    }
</script>

<style scoped>
    .cook{
        height: 50%;
    }

</style>